import React from 'react';
import PropTypes from 'prop-types';
import Color from './color.jsx';


const ColorList = ({ colors = [], onRemove = f => f, onRate = f => f }) => {
    return <div className="color-list">
        {(colors.length === 0) ?
            <p>no Colors, please Add Color</p> :
            colors.map(color => 
            <Color 
                key={color.id} 
                {...color}
                onRate={(rating)=>{
                     // console.log(color.id,'-----111-----',rating);
                    return onRate(color.id,rating)}}
                onRemove={()=>{onRemove(color.id)}}
            />)
        }
    </div>
}

export default ColorList;